<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
    <div class="nav">
        <img src="img/元宵汤圆.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer不显示任何内容,只是占位,把后面的a标签撑到后面去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>
    <!-- 这个div表示页面的主区域(版心) -->
    <div class="container">
        <!-- 左侧用户信息 -->
        <div class="container-left">
            <!-- 用这个元素表示用户的信息 -->
            <div class="card">
                <img src="img/20201227170738_9f5ea.gif" alt="">
                <h3>哒哒</h3>
                <a href="https://gitee.com/tvt-yuan">gitee地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容区域 -->
        <div class="container-right">
            <div class="blog-detail">
                <h3>我的第一篇博客</h3>
                <div class="date">
                    2022-11-22 12:00:00
                </div>
                <p>
                    从今天起我要认真敲代码
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quaerat nostrum saepe sed voluptatum amet praesentium, odit in sit, consequatur cumque quam magnam atque corrupti inventore dolorum, ex non ipsum!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores enim suscipit magnam fuga aliquid commodi amet, sapiente veritatis rerum ipsam aliquam atque sit quia cumque quaerat explicabo ea eligendi tenetur!
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis, architecto soluta asperiores aperiam, facere, explicabo quibusdam sunt impedit totam delectus in quisquam vero autem illo molestias? Illum vitae tenetur sapiente.
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae voluptas maiores, numquam assumenda provident obcaecati. Dicta nam totam nulla nesciunt eius eligendi eum corporis distinctio, omnis suscipit quasi. Rerum, distinctio.
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea quidem dolorem saepe optio non ex eaque aliquam porro officia fugit architecto excepturi, nulla molestiae quas nisi consequuntur amet qui. Dolorem?
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel harum ipsa sequi sunt veritatis ex? Consequatur natus mollitia aliquam alias eaque dolorum eius neque magnam expedita architecto incidunt, nisi aperiam.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, quo tempore laudantium, pariatur sed, nulla illum animi quae rerum corrupti expedita. Fugit mollitia modi sit omnis ad. Fugit, nihil nobis.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, soluta voluptatum. Quod adipisci mollitia dolorem in saepe, eveniet recusandae quia, amet dolor aut repellat repudiandae officia sed odit quis expedita.
                </p>
            </div>
        </div>
    </div>
</body>
</html>